<template>
    <div class="chart-wrap">
       <div class="title">
          <span v-text="name"></span>
          <div class="tools">
            <el-select v-model="query.orgId" placeholder="请选择">
              <el-option
                v-for="item in dateTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <el-date-picker
              v-model="query.startDate"
              type="date"
              placeholder="选择日期"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd">
            </el-date-picker>
            <el-date-picker
              v-model="query.endDate"
              type="date"
              placeholder="选择日期"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd">
            </el-date-picker>
          </div>
       </div>
       <div class="html-wrap" style="padding-top: 10px;">
           <div ref="toimage" class="content" >
              <table class="tablehtml" >
                <tr>
                  <th>序号</th>
                  <th>名称</th>
                </tr>
                <tr  v-for="(item,index) in list">
                  <td>{{index + 1}}</td>
                  <td>{{item.name}}</td>
                </tr>
              </table>
           </div>
       </div>
    </div>
</template>

<script>
    import mixin from '../mixs/mixin.js';
    import html2canvas from 'html2canvas';
    export default {
        name: "chart_1" ,
        mixins: [mixin],
        props: {
          name: {
            type: String,
            default: '表名称'
          },
          category:{
            type: String,
            default: 'news' //分类 news,paper,patent
          }
        },
        data() {
          let startDate = new Date(`${new Date().getFullYear()}/1/1`).Format('yyyy-MM-dd');
          let endDate = new Date().Format('yyyy-MM-dd');

          // 格式化数据 为什么写这段请问仝
          let type =  '';
          switch(this.category) {
            case 'news':
              type = 0;
              break;
            case 'paper':
              type = 1;
              break;
            case 'patent':
              type = 2;
              break;
            default:
              type = 0;
          }

          return {
            apiUrl:'organalyse/orgTechEventDetails',
            dateTypeList:[],
            query:{
              startDate:startDate, //开始时间
              endDate:endDate, //结束时间
              orgId:'', //机构ID
              type:type, //类型 0代表新闻动态，1代表论文，2代表专利
            },
            list:[]
          }
        },
        mounted(){
          this._initChart();
        },
        methods: {
          _initChart() {

          },
          asyncDate(){
            //  异步加载数据  通用方法
            if(this.dateTypeList == 0){
              this.api({
                url: 'organalyse/importantOrgList',
                method: "post",
                data:this.$qs.stringify({topicId:this.navCurrentId})
              }).then(typelist => {
                let dateTypeList = []
                typelist.forEach((item,index) => {
                  if(index == 0){
                    this.query.orgId = item.coid;
                  }
                  dateTypeList.push({
                    label:item.coname,
                    value:item.coid
                  })
                })
                this.dateTypeList = dateTypeList;

                //请求数据
                this.api({
                  url: this.apiUrl,
                  method: "post",
                  data:this.$qs.stringify({...this.query,topicId:this.navCurrentId})
                }).then(data => {
                  this._formatDate(data)
                });

              });
            }else{
              this.api({
                url: this.apiUrl,
                method: "post",
                data:this.$qs.stringify({...this.query,topicId:this.navCurrentId})
              }).then(data => {
                this._formatDate(data)
              });
            }

          },
          getDataURL(){
              return new Promise((resolve,reject)=>{
                // 获取图片base64
                html2canvas(this.$refs.toimage).then(function(canvas) {
                  let img =  canvas.toDataURL("image/png");
                  resolve(img);
                });
              })
          },
          _formatDate(data){
            // 根据不同的数据 配合不同的方法
            let list = [];
            data.forEach(item => {
              list.push({
                id:item.id,
                name:item.title
              })
            });
            this.list = list;
            this._setOption();
          },
          _setOption(){

          }
        },


    }
</script>

<style lang="scss" scoped>
    .chart{
      position: relative;
      .content{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
      }
    }
    .tablehtml{
      border-collapse: collapse;
      width: 100%;
       background: #000;
       th{
         font-size: 14px;
       }
       th,td{
         padding: 6px 8px;
         background: #fff;
         border: 1px solid #888;
         text-align: center;
       }

    }

</style>
